<template>
  <div class="CustomDialog-box" :class="{ isWap: isMobileType, 'CustomDialog-anim': store.CustomDialogShow }">
    <t-dialog
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      v-model:visible="store.CustomDialogShow"
      width="100vw"
      placement="center"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-esc-keydown="onEscKeydown"
      :on-close-btn-click="onCloseBtnClick"
      :on-overlay-click="onOverlayClick"
      :on-close="close"
      :on-confirm="onConfirmAnother"
    >
      <getchild />
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import style11 from './style11/index.vue';
import { commonDataStore, useProjectStore } from '@/store';

const store = useProjectStore();
const visible = ref(false);
const current = ref(1);
const pageSize = ref(10);
const commonStore = commonDataStore();
const isMobileType = ref(false);
const initWap = () => {
  const isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
  );

  if (isMobile) {
    isMobileType.value = true;
  }
};
initWap();
const onConfirmAnother = (context) => {
  console.log('点击了确认按钮', context);
  visible.value = false;
  store.setCustomDialogShow(false);
};
const close = (context) => {
  //   console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  store.setCustomDialogShow(false);
};
const onCancel = (context) => {
  //   console.log('点击了取消按钮', context);
  // store.setCustomDialogShowShow(false)
};
const onEscKeydown = (context) => {
  //   console.log('按下了ESC', context);
  // store.setCustomDialogShowShow(false)
};
const onCloseBtnClick = (context) => {
  //   console.log('点击了关闭按钮', context);
  // store.setCustomDialogShowShow(false)
};
const onOverlayClick = (context) => {
  //   console.log('点击了蒙层', context);
};
const handleTouchStart = (event) => {
  // 阻止默认行为和冒泡
  event.stopPropagation();
};

const handleTouchMove = (event) => {
  // 阻止默认行为和冒泡
  // 你可以在这里处理滑动逻辑
  event.stopPropagation();
};

const handleTouchEnd = (event) => {
  // 阻止默认行为和冒泡（如果需要）
  // event.preventDefault();
  event.stopPropagation();
  // // 处理滑动结束的逻辑
  // console.log('Touch ended');
};

const getchild = computed(() => {
  switch (commonStore.templateId) {
    case 621784378253381:
      return style11;
      break;
    default:
      return style11;
      break;
  }
});
</script>

<style scoped lang="less">
.CustomDialog-box {
  :deep(.t-dialog) {
    width: 80% !important;
    padding: 0;
    background: transparent;
    border: none;
    transform: translateZ(0px);
  }
  :deep(.t-dialog__header) {
    display: none;
  }
  :deep(.t-dialog__footer) {
    display: none;
  }
  :deep(.t-dialog__body) {
    padding: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  :deep(.t-dialog__ctx .t-dialog__position) {
    padding: 0px;
  }
}

.CustomDialog-anim {
  ::v-deep .t-dialog {
    animation: anim 1s ease forwards;
  }
}

@keyframes anim {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.isWap {
  :deep(.unit-exbi-remarks-info-remarks p) {
    font-size: 30px !important;
    line-height: 48px !important;
  }
  :deep(.titleStyle5) {
    span {
      font-size: 26px !important;
      line-height: 42px !important;
    }
  }
}
</style>
